import cn from '../cn';

type ButtonProps = {
  children?: React.ReactNode;
  type?: 'button' | 'submit' | 'reset';
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  className?: string;
  disabled?: boolean;

  noRound?: boolean;
  size?: Size;
};

export default function Button(props: ButtonProps) {
  const { type, children, onClick, className } = props;

  const { disabled } = props;
  const { noRound, size } = props;

  const _size = size || 'md';

  const $size =
    _size == 'md'
      ? 'px-4 py-1.5 text-sm leading-6'
      : _size == 'sm'
      ? 'px-2 py-0 text-sm leading-2'
      : _size == 'lg'
      ? 'px-8 py-2 text-base leading-8'
      : 'px-4 py-1.5 text-sm leading-6';
  const $text = 'text-white font-semibold';
  const $round = noRound === true ? '' : 'rounded-md';
  const $block = 'inline-block';
  const $disabled = disabled ? 'opacity-50 cursor-not-allowed' : '';
  const $background = 'bg-kq-600 hover:bg-kq-500';

  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      className={cn(className, $disabled, $size, $text, $background, $round, $block, 'whitespace-nowrap')}
    >
      {children}
    </button>
  );
}
